<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="index2.css">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>
    <div class="header">
        <!-- 设置logo -->
        <div class="logo">
            <img src="image/logo.png">
        </div>
        <!-- 设置菜单 -->
        <div class="menu" onmouseleave="show_menu1()">
            <div class="menu_title" onclick="show_menu()">
                <a href="#">内容分类</a></div>
            <ul id="menu1">
                <li>现实主义</li>
                <li>抽象主义</li>
            </ul>
        </div>
        <!-- 设置用户登录 -->
        <div class="auth">
            <ul>
                <li><a href="#" id="cartlink" @click="cartdetail()">购物车</a></li>
                <!--				<li><a href="#" id="cartlink" @click="visible = true">购物车</a></li>-->
                <!--				<li><a href="#" id="cartlink" @click="cartdetail();visible=true">购物车</a></li>-->
                <li><a href="/register.html">注册</a></li>


                <li>
                    <a href="#" id="loginlink" @click="logindetail()">登录</a>
                </li>
            </ul>
        </div>

        <div id="app">
            <table border="1" style="width:800px;position:absolute;margin-top:150px;margin-left: 150px;">
                <th scope="col">外观</th><th scope="col">名称</th><th scope="col">价格</th>
                <tr v-for="item in info">
                    <td><img :src="item.img"/></td>
                    <td>{{item.itemname}}</td>
                    <td>{{item.price}}</td>

                </tr>
                <!--@TODO 总价-->
                <tr>
                    <td> </td>
                    <td> <el-button  type="button" id="orderbutton" @click="order()">确认</el-button></td>
                    <td> </td>

                </tr>
            </table>
        </div>

    </div>

    <script>
        new Vue({
            el: '#app',
            data () {
                return {
                    info: null
                }
            },
            mounted(){
                axios
                    .post('/cart/')
                    .then(response => (this.info = response.data))
            }
        })
    </script>


</body>
</html>